/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable max-len */
/* eslint-disable consistent-return */
/**
 * Created by zhangsong on 2019-05-08.
 */
import Power from '@/constants/power';
import Authorized from '@/utils/Authorized';
// import CreatSelete from '@/components/CreatSelete';
import CreatableSelect from 'react-select/creatable';
import { MoreOutlined } from '@ant-design/icons';
import { datetimeFormat, WorkCardDefault } from '@/constants/styleConfig';
// import { components } from 'react-select';
import Selects, { components } from 'react-select';
import React, { Component } from 'react';
import {
  Form,
  Input,
  DatePicker,
  Button,
  Radio,
  Upload,
  Icon,
  Spin,
  Modal,
  Dropdown,
  Menu,
  Row,
  Col,
  Tooltip,
  Select,
  Checkbox,
  message,
} from 'antd';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import TemporaryReducer from '@/dva/application/temporary';
import ContractorReducer from '@/dva/application/contractor';
import UserReducer from '@/dva/user';
import { TemporaryApplication } from '@/constants/routes';
import { getBase64 } from '@/utils/utils';
import moment from 'moment';
import { checkHkid } from '@/utils/checkhkid'
import Modals from '@/components/Modal';

import Style from './index.module.scss';
import './index.scss';

const { Namespace, Effects, Reducers } = TemporaryReducer;
const { Option } = Select;
const { RangePicker } = DatePicker;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    handleSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.saveContractor}`,
        data,
      }),
    handPDFModalCancel: data =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data,
      }),
    handleSaveModalOk() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
          pdfPreviewVisible: true,
        },
      });
    },
    saveModalCancel() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
        },
      });
    },
    listSubcontractor() {
      dispatch({
        type: `${Namespace}/${Effects.listSubcontractor}`,
      });
    },
    getGroupList() {
      dispatch({
        type: `${Namespace}/${Effects.getGroupList}`,
      });
    },
    creatGroupList: data => {
      dispatch({
        type: `${Namespace}/${Effects.creatGroupList}`,
        data,
      });
    },
    getMainContractor(data) {
      dispatch({
        type: `${Namespace}/${Effects.getMainContractor}`,
        data,
      });
    },
    createMainContractor: data => {
      dispatch({
        type: `${Namespace}/${Effects.createMainContractor}`,
        data,
      });
    },
    getLoction(data) {
      dispatch({
        type: `${Namespace}/${Effects.getLoction}`,
        data,
      });
    },
    creatLoction: data => {
      dispatch({
        type: `${Namespace}/${Effects.creatLoction}`,
        data,
      });
    },
    goback() {
      dispatch({
        type: `${Namespace}/${Effects.goback}`,
      });
    },
    modifyloctionlist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifyloctionlist}`,
        data,
      });
    },
    deleteloctionlist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deleteloctionlist}`,
        data,
      });
    },
    modifycontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifycontralist}`,
        data,
      });
    },
    deletecontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deletecontralist}`,
        data,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false,
      previewImage: '',
      grouplist: [],
      creatSeleteModal: false,
      clientX: 0,
      clientY: 0,
      menuIsopen: false,
      menuIsopentwo: false,
      creatInput: '',
      creatId: 0,
      seletype: '',
    };
  }

  componentDidMount() {
    const { form, listSubcontractor, getGroupList, getMainContractor, getLoction } = this.props;
    listSubcontractor();
    getGroupList();
    getMainContractor(form);
    getLoction({ form });
  }

  normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  // 自定义可选项
  Option = (event, str) => {
    const { data } = event;
    return (
      <components.Option {...event}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>{data.label}</div>
          <Button onClick={e => {
            e.stopPropagation();
            e.preventDefault();
            const left = e.clientX - (window.innerWidth / 2);
            this.setState({
              creatSeleteModal: true,
              clientX: left,
              clientY: e.clientY,
              creatInput: data.label,
              creatId: data.value,
              seletype: str,
            })
          }} style={{ zIndex: 1000, color: '#000' }} type="link" icon="more" />
        </div>
      </components.Option>
    );
  };

  handleGoBack = () => {
    const { goback } = this.props;
    goback();
  };

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.type === 'application/pdf') {
      Modal.info({ title: formatMessage('applicationContractor.tips.noSupportedPDF') });
      return;
    }
    if (!file.url) {
      if (file.response) {
        file.thumbUrl = file.response;
      } else {
        file.thumbUrl = await getBase64(file.originFileObj);
      }
    }

    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleClear = () => {
    const { form } = this.props;
    form.setFieldsValue({
      name: undefined,
      identity_card: undefined,
      tel: undefined,
      location: undefined,
      email: undefined,
      approved: undefined,
      contract_number: undefined,
      escorter_name: undefined,
      escorter_tel: undefined,
      escorter_pass: undefined,
      card_type: undefined,
      start_time: undefined,

      vaccination_date1: undefined,
      vaccination_date2: undefined,
      vaccination_date3: undefined,
      vaccination_date4: undefined,
      vaccination_date5: undefined,
    });
  };

  setHeadPhoto = async list => {
    let i = 0;
    if (Array.isArray(list)) {
      for (i = 0; i < list.length; i += 1) {
        if (!list[i].url) {
          if (list[i].response) {
            list[i].thumbUrl = list[i].response;
          } else if (!list[i].thumbUrl) {
            // eslint-disable-next-line no-await-in-loop
            list[i].thumbUrl = await getBase64(list[i].originFileObj);
          }
        }
      }
    }
    return list;
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, handleSubmit } = this.props;
    form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        const {
          id_base64,
          green_base64,
          drive_base64,
          regist_base64,
          vacc_base64,
          exemption_base64,
          identity_card,
          green_card_expire,
          registration_card_expire,
          vaccination_date1,
          vaccination_date2,
          vaccination_date3,
          vaccination_date4,
          vaccination_date5,
          vacc_expire
        } = values;
        // if (!checkHkid(identity_card)) {
        //   return Modals.tips(formatMessage('applicationContractor.columns.identityCard.rez'));
        // }
        console.log('valuessss', values)
        handleSubmit({
          ...values,
          id_base64: await this.setHeadPhoto(id_base64),
          green_base64: await this.setHeadPhoto(green_base64),
          drive_base64: await this.setHeadPhoto(drive_base64),
          regist_base64: await this.setHeadPhoto(regist_base64),
          vacc_base64: await this.setHeadPhoto(vacc_base64),
          exemption_base64: await this.setHeadPhoto(exemption_base64),
          green_card_expire: green_card_expire ? moment(green_card_expire).format(datetimeFormat.time) : undefined,
          registration_card_expire: registration_card_expire ? moment(registration_card_expire).format(datetimeFormat.time) : undefined,
          vaccination_date1: vaccination_date1 ? moment(vaccination_date1).format(datetimeFormat.time) : undefined,
          vaccination_date2: vaccination_date2 ? moment(vaccination_date2).format(datetimeFormat.time) : undefined,
          vaccination_date3: vaccination_date3 ? moment(vaccination_date3).format(datetimeFormat.time) : undefined,
          vaccination_date4: vaccination_date4 ? moment(vaccination_date4).format(datetimeFormat.time) : undefined,
          vaccination_date5: vaccination_date5 ? moment(vaccination_date5).format(datetimeFormat.time) : undefined,
          vacc_expire: vacc_expire ? moment(vacc_expire).format(datetimeFormat.time) : undefined,
        });
      }
    });
  };

  handleSaveModalCancel = () => {
    const { history, saveModalCancel } = this.props;
    saveModalCancel();
    history.push(TemporaryApplication.list.url);
  };

  previewPdf = () => {
    const { previewPdf } = this.props;
    previewPdf({});
  };

  onChangeDate = index => {
    const { form } = this.props;
    const date1 = form.getFieldValue('vaccination_date1');
    const date2 = form.getFieldValue('vaccination_date2');
    const date3 = form.getFieldValue('vaccination_date3');
    const date4 = form.getFieldValue('vaccination_date4');
    const date5 = form.getFieldValue('vaccination_date5');
    console.log('所有的日期', index, date1, date2, date3, date4, date5);
    // // let bool = false;
    // switch (index) {
    //   case 1:
    //     break;
    //   case 2:

    //     break;
    //   case 3:

    //     break;
    //   case 4:

    //     break;
    //   case 5:

    //     break;
    //   default:
    //     break;
    // }
  };

  handlePDFOk = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(TemporaryApplication.list.url);
  };

  handlePDFCancel = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(TemporaryApplication.list.url);
  };

  // 分组名称
  handleChange = value => {
    console.log('valuevaluevalue', value)
  }

  childrenGroup = groupList => {
    console.log('groupListgroupList', groupList)
    const children = [];
    for (let i = 0; i < groupList.length; i += 1) {
      children.push(<Option key={groupList[i]}>{groupList[i]}</Option>);
    }
    return children
  }

  // 添加的时候
  onCreateOption = str => {
    const { form, creatGroupList } = this.props;
    const { grouplist } = this.state;
    const lists = grouplist
    lists.push({ value: str, label: str })
    this.setState({
      grouplist: lists,
    })
    form.setFieldsValue({
      groupName: lists,
    })
    const data = [str];
    creatGroupList(data)

    // creatGroupList(data)
  }

  // 添加的时候
  onCreateMainList = str => {
    const { form, createMainContractor } = this.props;

    const data = [];
    data.push(str);
    console.log('點了添加的東西', str, data)
    // form.setFieldsValue({
    //   contract_number: { value: str, label: str },
    // })
    createMainContractor({ data: str, form })
  }
  // 訪問地區

  onCreateLoctionList = str => {
    const { form, creatLoction } = this.props;
    const data = [];
    data.push(str);
    console.log('點了添加的東西', str, data)
    // form.setFieldsValue({
    //   location: { value: str, label: str },
    // })
    creatLoction({ data: str, form })
  }

  onChangeMainList = str => {
    console.log('好吧好吧', str)
  }

  // 访问地区的位置
  listUpdate = () => {
    const { creatId, creatInput, seletype } = this.state;
    const { modifyloctionlist, form, modifycontralist, contractorStore } = this.props;
    const { mainContractorList, loctionList } = contractorStore

    this.setState({
      creatSeleteModal: false,
    })
    if (seletype === 'loc') {
      let id = null;
      let label = '';
      if (form.getFieldValue('location')) {
        for (let i = 0; i < loctionList.length; i += 1) {
          if (form.getFieldValue('location').label === loctionList[i].label) {
            id = loctionList[i].value;
            label = loctionList[i].label;
          }
        }
        if (form.getFieldValue('location').label === label) {
          // form.setFieldsValue({
          //   location: { value: id, label: creatInput },
          // })
        }
      }
      console.log('啦啦啦啦啦', form.getFieldValue('location'), id, loctionList)
      modifyloctionlist({
        data: creatInput,
        id: id || creatId,
        form,
      })
    } else {
      let id = null;
      let label = '';
      if (form.getFieldValue('contract_number')) {
        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (form.getFieldValue('contract_number').label === mainContractorList[i].label) {
            id = mainContractorList[i].value;
            label = mainContractorList[i].label;
          }
        }
        if (form.getFieldValue('contract_number').label === label) {
          // form.setFieldsValue({
          //   contract_number: { value: id, label: creatInput },
          // })
        }
      }
      modifycontralist({
        data: creatInput,
        id: id || creatId,
        form,
      })
    }
  }

  // 访问地区的位置
  listDelete = () => {
    const { creatId, creatInput, seletype } = this.state;
    const { deleteloctionlist, form, deletecontralist } = this.props;
    this.setState({
      creatSeleteModal: false,
    })
    console.log('11111', form.getFieldValue('location'), creatId)
    if (seletype === 'loc') {
      deleteloctionlist(creatId)
      if (form.getFieldValue('location')) {
        if (form.getFieldValue('location').value === creatId) {
          console.log('还是今年年内')
          form.setFieldsValue({
            location: null,
          })
        }
      }
    } else {
      deletecontralist(creatId)
      if (form.getFieldValue('contract_number')) {
        if (form.getFieldValue('contract_number').value === creatId) {
          form.setFieldsValue({
            contract_number: null,
          })
        }
      }
    }
  }

  onChangeselete = str => {
    const { form } = this.props;
    this.setState({
      grouplist: str,
    })
    form.setFieldsValue({
      groupname: str,
    })
    console.log('onChangeselete', str)
  }

  disabledDate = time => {
    const date = new Date() // 获取指定的时间并标准化
    return time < moment().year(date.getFullYear()).month(date.getMonth()).date(date.getDate() - 1)
  }

  renderText = () => formatMessage('applicationContractor.temporary.errMessage.onetext')

  render() {
    const { form, contractorStore = {}, userStore = {}, handleSaveModalOk } = this.props;
    const { previewVisible, previewImage, menuIsopentwo, creatInput, creatSeleteModal, clientX, clientY, menuIsopen } = this.state;
    const { getFieldDecorator } = form;
    let headPhotoUpload = true;
    const headPhoto = form.getFieldValue('headPhoto');
    if (headPhoto && Array.isArray(headPhoto) && headPhoto.length > 0) {
      headPhotoUpload = false;
    }
    let annexesUpload = true;
    const annexes = form.getFieldValue('annexes');
    if (annexes && Array.isArray(annexes) && annexes.length > 10) {
      annexesUpload = false;
    }
    const {
      saveLoading,
      saveSuccessModal,
      mainContractorList,
      loctionList,
      subcontractor,
    } = contractorStore;
    const { currentUser, workerType } = userStore;
    return (
      <PageHeaderWrapper id="myBtn">
        <Spin spinning={!!saveLoading} size="large">
          <div className={`${Style.body} contractor-add-wrapper`}>
            <div className={Style.excelTitle}>
              <h1>AIRPORT AUTHORITY HONG KONG</h1>
              <h1>TEMPORARY PASS PROCESSING</h1>
            </div>
            <Modal
              style={{ top: clientY + 20, left: clientX }}
              visible={creatSeleteModal}
              footer={null}
              closable={false}
              mask={false}
              maskClosable
              width={200}
              onCancel={() => {
                this.setState({
                  creatSeleteModal: false,
                })
              }}
            >
              <div>
                <Input maxLength={50} value={creatInput} onChange={e => {
                  console.log('eeee', e)
                  this.setState({
                    creatInput: e.target.value,
                  })
                }} />
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                  <Button type="primary" onClick={() => this.listUpdate()}>
                    {formatMessage('button.update')}
                  </Button>
                  <Button type="primary" onClick={() => this.listDelete()}>
                    {formatMessage('button.remove')}
                  </Button>
                </div>
              </div>
            </Modal>
            <Modal
              visible={previewVisible}
              footer={null}
              maskClosable
              onCancel={() => {
                this.handlePhotographClose();
              }}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <Modal
              visible={saveSuccessModal}
              title={formatMessage('baseInfo.saveSuccess')}
              okText={formatMessage('baseInfo.previewPDF')}
              cancelText={formatMessage('baseInfo.goToList')}
              onOk={() => handleSaveModalOk()}
              onCancel={() => this.handleSaveModalCancel()}
              footer={[
                <Button onClick={() => this.handleSaveModalCancel()}>
                  {formatMessage('baseInfo.goToList')}
                </Button>,
              ]}
            >
              <p>{formatMessage('applicationCommon.workerCard.pdfmessage')}</p>
            </Modal>
            <Form labelAlign="right" onSubmit={this.handleSubmit}>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part A</strong>
                  <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>1</div>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>Applicant's Particulars</div>
                    <div className={Style.table}>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.surname.longText',
                          )}
                        >
                          {getFieldDecorator('name', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.surname.errMessage',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} className={Style.inputs} />)}
                        </Form.Item>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.otherName.name',
                            )}
                          >
                            {getFieldDecorator('other_name', {})(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.sex.name')}
                          >
                            {getFieldDecorator('sex', {
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.sex.errMessage',
                                  ),
                                },
                              ],
                              initialValue: 0,
                            })(
                              <Radio.Group>
                                <Radio value={0}>{formatMessage('baseInfo.male')}</Radio>
                                <Radio value={1}>{formatMessage('baseInfo.female')}</Radio>
                              </Radio.Group>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.nameAlias.name')}
                        >
                          {getFieldDecorator('chi_name', {})(
                            <Input maxLength={50} className={Style.inputs} />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={
                            <div
                              style={{
                                display: 'inline-block',
                                lineHeight: '24px',
                              }}
                            >
                              Hong Kong Identity Card / Passport /
                              <br />
                              Imported Labour Identity Card Number:
                            </div>
                          }
                          colon={false}
                        >
                          {getFieldDecorator('identity_card', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.identityCard.errMessage',
                                ),
                              },
                              // {
                              //   pattern: '^[A-Z]{1,2}[0-9]{6}\\(?[0-9A]\\)?$',
                              //   message: formatMessage(
                              //     'applicationContractor.columns.identityCard.rez',
                              //   ),
                              // },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('id_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      {/* <div className={Style.row}>
                      </div> */}
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.telephone.name')}
                        >
                          {getFieldDecorator('tel', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.telephone.errMessage',
                                ),
                              },

                              {
                                pattern: '^[0-9]{8,8}$',
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedName.rez',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>

                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>2</div>
                  <div className={Style.detailWrapper}>
                    <div>In case of Escort Person the following person should be contacted :</div>
                    <div className={Style.table}>

                      <div className={Style.row}>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.temporary.escortername',
                            )}
                          >
                            {getFieldDecorator('escorter_name', {
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.escname',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.nameAlias.name')}
                          >
                            {getFieldDecorator('escorter_chi_name', {})(
                              <Input maxLength={50} className={Style.inputs} />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.temporary.escorterpass',
                          )}
                        >
                          {getFieldDecorator('escorter_pass', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.temporary.errMessage.escpass',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.temporary.escortertel',
                          )}
                        >
                          {getFieldDecorator('escorter_tel', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.temporary.errMessage.esctel',
                                ),
                              },
                              {
                                pattern: '^[0-9]{8,8}$',
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedName.rez',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part B</strong>
                  <i>(TO BE COMPLETED BY THE CONTRACTOR CONCERNED)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>To Security Manager ( Airport Authority Hong Kong )</div>
                    <div className={Style.table}>
                      <div className={Style.row}>
                        {/* <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contractNumber', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item> */}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contract_number', {
                            initialValue: currentUser.role_id === '110' ? { value: currentUser.contractId, label: currentUser.contractNumber } : undefined,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(
                            <CreatableSelect
                              isDisabled={currentUser.role_id === '110'}
                              styles={{
                                menu: base => ({
                                  ...base,
                                  zIndex: 10,
                                }),
                                // control: base => ({
                                //   ...base,
                                //   height: '35px !important',
                                // }),
                                input: base => ({
                                  ...base,
                                  // height: '35px !important',
                                  // backgroundColor: 'pink',

                                }),
                                multiValue: base => ({
                                  ...base,
                                  // backgroundColor: 'pink',
                                  // height: '25px !important',
                                  display: 'flex',
                                  alignItems: 'center',
                                }),
                                valueContainer: base => ({
                                  ...base,
                                  height: '45px !important',
                                }),
                              }}
                              style={{ height: 20 }}
                              menuIsOpen={menuIsopen}
                              onMenuOpen={() => {
                                this.setState({
                                  menuIsopen: !menuIsopen,
                                })
                              }}
                              onMenuClose={() => {
                                if (creatSeleteModal) {
                                  return;
                                }
                                this.setState({
                                  menuIsopen: false,
                                })
                              }}
                              // isMulti
                              components={{ Option: e => this.Option(e, 'con') }}
                              onCreateOption={this.onCreateMainList}
                              onChange={this.onChangeMainList}
                              options={mainContractorList}
                              placeholder={formatMessage('baseInfo.placeholderChecked')}
                            />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.contractSubcontractor.name',
                          )}
                        >
                          {getFieldDecorator('sub_contractor', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errcontraMsg',
                                ),
                              },
                            ],
                          })(
                            <Select
                              showSearch
                              style={{ width: '100%' }}
                              placeholder={formatMessage('baseInfo.placeholderChecked')}
                              optionFilterProp="children"
                              loading={subcontractor === null}
                              filterOption={(input, option) =>
                                option.props.children
                                  .toLowerCase()
                                  .indexOf(input.toLowerCase()) >= 0
                              }
                            >
                              {Array.isArray(subcontractor)
                                ? subcontractor.map(item => (
                                  <Select.Option key={item.id}>{`${item.name}`}</Select.Option>
                                ))
                                : null}
                            </Select>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {/* {formatMessage('applicationContractor.text.partB.possify')} */}
                      </div>
                      <div className={`${Style.row}`}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationContractor.text.partB.atteify')}
                          >
                            {getFieldDecorator('approve_text', {
                              initialValue: true,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                disabled
                                checked
                                name="approve_text2"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} `}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationContractor.text.partB.depm')}
                          >
                            {getFieldDecorator('approve_text2', {
                              initialValue: true,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                disabled
                                checked
                                name="approve_text2"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      {/* <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.atteify')}
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.depm')}
                      </div> */}
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part C</strong>
                  <i>(TO BE COMPLETED BY SECURITY DEPARTMENT AIRPORT AUTHORITY HONG KONG)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>{formatMessage('applicationContractor.text.partC.relevant')}</div>
                    <div className={Style.table}>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                        >
                          {getFieldDecorator('expire_time', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationCommon.workerCard.expiredDate.errMessage',
                                ),
                              },
                            ],
                          })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.checkedReasons.name')}
                        >
                          {getFieldDecorator('reasons', {})(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.part} >
                <div className={Style.title}>
                  <strong>Card</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      {/* 绿卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('green_card_name', {
                              initialValue: WorkCardDefault.greenCard,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('green_card_number', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                          >
                            {getFieldDecorator('green_card_expire', {
                              rules: [
                                {
                                  required: form.getFieldValue('green_card_number'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('green_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 工人注册卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('registration_card_name', {
                              initialValue: WorkCardDefault.registerCard,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('registration_card_number', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                          >
                            {getFieldDecorator('registration_card_expire', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>

                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('regist_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 疫苗日期 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.vaccinationstem_date" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccinationstem_date1')}
                          >
                            {getFieldDecorator('vaccination_date1', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                onChange={() => this.onChangeDate(1)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccinationstem_date2')}
                          >
                            {getFieldDecorator('vaccination_date2', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('vaccination_date1')}
                                onChange={() => this.onChangeDate(2)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccinationstem_date3')}
                          >
                            {getFieldDecorator('vaccination_date3', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2')
                                  )
                                }
                                onChange={() => this.onChangeDate(3)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column3}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccinationstem_date4')}
                          >
                            {getFieldDecorator('vaccination_date4', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3')
                                  )
                                }
                                onChange={() => this.onChangeDate(4)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccinationstem_date5')}
                          >
                            {getFieldDecorator('vaccination_date5', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3') &&
                                    form.getFieldValue('vaccination_date4')
                                  )
                                }
                                onChange={() => this.onChangeDate(5)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('exemption_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.includetem" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.includetem')}
                          >
                            {getFieldDecorator('exemption_certificate', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                checked={form.getFieldValue('exemption_certificate')}
                                name="exemption_certificate"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.nametem')}
                          >
                            {getFieldDecorator('vacc_expire', {
                              rules: [
                                {
                                  required: form.getFieldValue('exemption_certificate'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('exemption_certificate')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('vacc_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationContractor.temporary.email" />
                      </div>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.temporary.email')}
                          >
                            {getFieldDecorator('email', {
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.email',
                                  ),
                                },
                              ],
                            })(<Input maxLength={255} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.bottom}>
                <Button htmlType="button" icon="rollback" onClick={this.handleGoBack}>
                  {formatMessage('button.rollback')}
                </Button>
                <Authorized authority={Power.TemporaryApplication.add}>
                  <Button type="primary" htmlType="submit">
                    {formatMessage('button.save')}
                  </Button>
                </Authorized>

              </div>
            </Form>
          </div>
        </Spin >
      </PageHeaderWrapper >
    );
  }
}

export default Index;
